From 30cb5b07544764059aaa211cb733bfeb31fa0265 Mon Sep 17 00:00:00 2001
From: Daniel Boles <dboles@src.gnome.org>
Date: Sat, 16 Sep 2017 17:02:24 +0100
Subject: [PATCH] Adwaita: Fix color of focus outline on colorswatch
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

The focus outline disappeared as the colour of the swatch got close to
the normal focus outline colour, which is alpha(currentColor, 0.3).

Fix by making the outline an alpha’d version of the tick colour, but
more opaque than normal outlines. 0.6 seems good enough; feel free to
improve it, but at least this ensures the outline can’t vanish anymore.

HighContrast achieves this already because it applies the color property
to the main node, not the overlay. Doing that means the outline is fully
opaque, which is fine for HC obviously but was excessive for Adwaita.

https://bugzilla.gnome.org/show_bug.cgi?id=787757
---
 gtk/theme/Adwaita/_common.scss           | 24 ++++++++++++++++--------
 gtk/theme/Adwaita/gtk-contained-dark.css |  4 ++++
 gtk/theme/Adwaita/gtk-contained.css      |  4 ++++
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index f0041c80f9..3dd88327c9 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4116,20 +4116,28 @@ colorswatch {
     }
   }
 
-  &.dark overlay {
-    color: white;
+  &.dark {
+    outline-color: transparentize(white, 0.4);
+
+    overlay {
+      color: white;
 
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
+      &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
 
-    &:backdrop { color: transparentize(white, 0.5); }
+      &:backdrop { color: transparentize(white, 0.5); }
+    }
   }
 
-  &.light overlay {
-    color: black;
+  &.light {
+    outline-color: transparentize(black, 0.4);
 
-    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
+    overlay {
+      color: black;
+
+      &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
 
-    &:backdrop { color: transparentize(black, 0.5); }
+      &:backdrop { color: transparentize(black, 0.5); }
+    }
   }
 
   &:drop(active) {
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index be1d69a91c..8596f6f711 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1764,12 +1764,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius
 
 colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
 
+colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); }
+
 colorswatch.dark overlay { color: white; }
 
 colorswatch.dark overlay:hover { border-color: #1b1f20; }
 
 colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); }
 
+colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); }
+
 colorswatch.light overlay { color: black; }
 
 colorswatch.light overlay:hover { border-color: #1b1f20; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 2ad07d0b7b..2ff271f5da 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1784,12 +1784,16 @@ colorswatch.right, colorswatch:last-child:not(.bottom) { border-top-right-radius
 
 colorswatch.right overlay, colorswatch:last-child:not(.bottom) overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
 
+colorswatch.dark { outline-color: rgba(255, 255, 255, 0.6); }
+
 colorswatch.dark overlay { color: white; }
 
 colorswatch.dark overlay:hover { border-color: rgba(0, 0, 0, 0.8); }
 
 colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.5); }
 
+colorswatch.light { outline-color: rgba(0, 0, 0, 0.6); }
+
 colorswatch.light overlay { color: black; }
 
 colorswatch.light overlay:hover { border-color: rgba(0, 0, 0, 0.5); }
-- 
2.30.2